import React, { Component } from 'react';

class Rate extends Component {

    componentDidMount() {
        this.interval = setTimeout(this.onEnded, this.props.media.playTime * 1000)
    }

    componentWillReceiveProps(nextProps) {
        this.interval = setTimeout(this.onEnded, nextProps.media.playTime * 1000)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    onEnded = () => {
        this.props.startNextMedia()
    }

    render() {
        return (
            <div className="rate" style={{ "backgroundImage": "url(static/image/lilv.png)", }}>
                <ul>
                    {this.props.media.list&&this.props.media.list.map((item, i) =>
                        <li key={i} className="list">
                            <span className={`name ${item.name.indexOf('、')===-1?'border':''}`} style={{fontSize:`${item.name.length>14?"25px":"36px"}`}} >{item.name}</span>
                            <span className="info">{item.rate?item.rate:""}</span>
                        </li>
                    )}
                </ul>
            </div>
        )
    }
}

export default Rate;
